import { Button, Typography } from 'antd'

import PC from '@/components/reposive/pc'
import IsMd from '@/components/reposive/is-md'

import '@/styles/common.css'
import '@/styles/big-content/left-pc.css'

const { Title, Text } = Typography

const LeftPC = () => {
  return (
    <>
      <PC>
        <div className="left-pc-style">
          <Title level={1}>
            Discover the world’s top designers &amp; creatives
          </Title>
          <Text>
            Dribbble is the leading destination to find &amp; showcase creative
            work and home to the world's best design professionals.
          </Text>
          <Button href="" size="large" type="primary" style={{ marginTop: 20 }}>
            Sign up
          </Button>
        </div>
      </PC>

      <IsMd>
        <div className="common-vertical" style={{ textAlign: 'center' }}>
          <Title level={1}>
            Discover the world’s top designers &amp; creatives
          </Title>
          <Text>
            Dribbble is the leading destination to find &amp; showcase creative
            work and home to the world's best design professionals.
          </Text>
          <Button href="" size="large" type="primary" style={{ marginTop: 20 }}>
            Sign up
          </Button>
        </div>
      </IsMd>
    </>
  )
}

export default LeftPC
